<template>
    <div class="kxy-container">
        <el-form :inline="true" :model="dataForm">
            <el-form-item>
                <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" v-loading='dataListLoading' row-key="menuId" border style="flex: 1" height="100%">
          <el-table-column label="序号" type="index" align="center"></el-table-column>
            <el-table-column prop="moduleName" align="center" header-align="center" min-width="150" label="导航名称"/>
            <el-table-column label="模块图片" header-align="center" width="200" align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.moduleImageUrl" style="width: 40px;height: 40px" alt="模块图片"/>
                </template>
            </el-table-column>
            <el-table-column prop="m_name" header-align="center" align="center" width="120" label="模块名称"/>
            <el-table-column prop="isShow" header-align="center" align="center" label="是否显示">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.isShow === 0">展示</el-tag>
                    <el-tag v-else-if="scope.row.isShow === 1" type="success">不展示</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="sort" header-align="center" align="center" label="排序"/>
            <el-table-column fixed="right" header-align="center" align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
                    <el-button type="text" @click="delOrUpdateHandle(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pages.page"
                :page-sizes="[10,20,50]"
                :page-size="pages.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"/>
    </div>
</template>

<script>
  import AddOrUpdate from './sys-add-modular'

  export default {
    data () {
      return {
        dataForm: {},
        dataList: [],
        dataListLoading: false,
        addOrUpdateVisible: false,
        pages: {
          page: 1,
          limit: 10
        },
        totalCount: 0
      }
    },
    components: {
      AddOrUpdate
    },
    mounted () {
      this.getDataList()
    },
    methods: {
      handleSizeChange (val) {
        this.pages = {
          page: 1,
          limit: val
        }
        this.getDataList()
      },
      handleCurrentChange (val) {
        this.pages.page = val
        this.getDataList()
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/indexModule/list'),
          method: 'post',
          data: this.pages
        }).then(res => {
          this.dataList = res.data.list.sort((a, b) => a.sort - b.sort)
          this.dataListLoading = false
          this.totalCount = res.data.totalCount
        })
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      delOrUpdateHandle (id) {
        this.$confirm(`确定要进行删除操作吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/indexModule/delete'),
            method: 'post',
            data: {ids: id || this.dataListSelections.map(item => item.id).join(',')}
          }).then(data => {
            if (data && data.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500
              })
              this.pages.page > 1 && this.dataList.length <= 1 && this.pages.page --
              this.getDataList()
            } else {
              this.$message.warning(data.msg)
            }
          })
        })
      }
    }
  }
</script>
